<template>
	<view class="container">
		<!-- 可拖动区域 -->
		<movable-area class="movearea">
			<movable-view direction="all" scale="true">
				<image class="img" :src="imgurl" mode="aspectFit"></image>
			</movable-view>

			<!-- 半透明遮罩 - 使用pointer-events: none让点击穿透到下层元素 -->
			<view class="mask" @touchmove.stop="handleTouchMove">
				<view class="top-area"></view>
				<view class="center-area"></view>
				<view class="bottom-area"></view>
			</view>
		</movable-area>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgurl: ''
		};
	},
	methods: {
		// 阻止遮罩层的默认触摸移动行为
		handleTouchMove(e) {
			// 不执行任何操作，仅阻止事件冒泡
		}
	},
	onLoad(opt) {
		this.imgurl = opt.imgurl;
	}
};
</script>

<style lang="scss" scoped>
.container {
	.movearea {
		position: relative;
		height: 100vh;

		.img {
			width: 100vw;
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none; // 让点击事件穿透到下层元素

			.top-area,
			.bottom-area {
				width: 100vw;
				height: calc((100vh - 100vw) / 2);
				background: rgba(0, 0, 0, 0.5);
			}

			.center-area {
				width: 100vw;
				height: 100vw;
				background: rgba(0, 0, 0, 0);
			}
		}
	}
}
</style>
